<template>
       
    <div style="border: 1px solid #ccc">
      <a-form
          ref="formRef"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          class=""
          :model="editRecordInfo"
        >
        <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="标题">
                <a-input v-model:value="editRecordInfo.title"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="类型">
                <a-select v-model:value="editRecordInfo.type" style="width: 100%" ref="select" :defaultActiveFirstOption="true">
                  <a-select-option v-for="typeInfo in data.typeList" :key="typeInfo.id" :value="typeInfo.label">{{typeInfo.label}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="计划开始时间">
                <a-date-picker :locale="locale" v-model:value="editRecordInfo.startTime" value-format="YYYY-MM-DD"  />
                <!-- <a-input v-model:value="record.startTime"></a-input> -->
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="计划完成时间">
                <a-date-picker :locale="locale" v-model:value="editRecordInfo.endTime" value-format="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="状态">
                <a-select allowClear v-model:value="editRecordInfo.status" status="width: 100%" ref="select" :defaultActiveFirstOption="true">
                    <a-select-option v-for="statusInfo in data.statusList" :key="statusInfo.id" :value="statusInfo.label">{{statusInfo.label}}</a-select-option>
                  </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="18">
              <a-form-item label="备注" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                <a-input v-model:value="editRecordInfo.mark"></a-input>
              </a-form-item>
            </a-col>
        </a-row>
      </a-form>
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        @onCreated="handleCreated"
        @onDestroyed="handleDestroyed"
      />
    </div>
    <a-button type="primary" size="small"  @click="saveHtmlText">保存</a-button>
  </template>
  <script setup lang="ts">
  import "@wangeditor/editor/dist/css/style.css"; // 引入 css
  import { onBeforeMount, onMounted, reactive, ref, shallowRef, watch,unref } from "vue";
  import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
  import service from "@/axios";
  import {dateFormater} from '@/util/util'
  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

  const props = defineProps({
    record:{} as any
  })
  let editRecordInfo = reactive({} as any)
  onBeforeMount(()=>{
    debugger
    editRecordInfo = reactive(Object.assign({},unref(props.record)))
    editRecordInfo.startTime = dateFormater(new Date(Number(editRecordInfo.startTime)),'yyyy-MM-dd')
    editRecordInfo.endTime = dateFormater(new Date(Number(editRecordInfo.endTime)),'yyyy-MM-dd')
  })

  const emit = defineEmits(['saveTask'])

  const data = reactive({
    statusList:[] as Array<any>,
    typeList:[] as Array<any>
  })

  service.post('/coc/getDict',{type:'fl'}).then(res=>{
    data.typeList = res.data;
  })
  service.post('/coc/getDict',{type:'taskStatus'}).then(res=>{
    data.statusList = res.data;
  })



  // 编辑器实例，必须用 shallowRef，重要！
  const editorRef = shallowRef();
  const toolbarConfig = ref({});
  const valueHtml = ref(props.record.content);
  const editorConfig = ref({ placeholder: "请输入内容..." });
  const handleCreated = (editor: any) => {
    /** 编辑起初始化 */
    debugger
    editorRef.value = editor;
  };
  const handleDestroyed = (editor: any) => {
    /**编辑器销毁 */
  };
  const saveHtmlText = () => {
    debugger
    editRecordInfo.content = valueHtml.value;
    editRecordInfo.startTime = new Date(editRecordInfo.startTime).getTime();
    editRecordInfo.endTime = new Date(editRecordInfo.endTime).getTime();
    service.post('/task/addTask',editRecordInfo).then(res=>{
        emit('saveTask',editRecordInfo)
    })
  };
  </script>
